<!DOCTYPE html>
<html>

<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta charset="UTF-8">
<!-- <base href="./pc" /> -->
<title>表格</title>
<link rel="stylesheet" href="css/jquery-ui.min.css">
<link rel="stylesheet" href="css/jquery-file-upload.css">
<style type="text/css">
html, body {
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
}

.container {
	border: 0 solid red;
	width: 100%;
	height: calc(100% - 10px);
	display: flex;
	flex-direction: column;
}

.header {
	border: thin solid red;
	text-align: center;
}

.main .query-div {
	border: thin solid red;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
}

.main .query-div>* {
	margin-right: 3%;
}

.main .main-table th>div {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	min-width: 120px;
}

.main .main-table th>div>a {
	display: flex;
	flex-direction: column;
	margin-left: 5px;
}

.main .main-table th>div abbr, .main .main-table tbody tr>td:last-child>*
	{
	cursor: pointer;
}

.main .main-table td {
	text-align: center;
	border-bottom: 1px solid #e78f08;
	border-right: 1px solid #e78f08;
}
.div-pagination > button{
	height: 35px;
	margin: 0 5px;
}

.div-pagination ul li {
	margin: 2px;
	padding : 5px;
	text-align:center;
	width: 20px; 
	float: left;
	list-style: none;
}

.div-pagination ul li.ui-widget-content:hover {
	cursor: pointer;
	color: #eb8f00;
}


.footer {
	border: thin solid red;
	text-align: center;
}
</style>
</head>

<body>

	<div class="container">
		<div class="header">顶部</div>
		<div class="main">
			<div class="query-div">
				<h1>搜索:</h1>
				<input name="p" value="1" style="display: none;">
				<div>
					<label>活动名称:</label> <input name="name">
				</div>
				<div>
					<label>活动区域:</label> <select name="region">
						<option value=""></option>
						<option value="区域一">区域一</option>
						<option value="区域二">区域二</option>
					</select>
				</div>
				<div>
					<label for="from">开始时间从:</label> <input type="text" name="start"> <label for="to">到:</label> <input type="text" name="end">
				</div>
				<div>
					<button onclick="initTable()">搜索</button>
					<a onclick="forInsert()" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-circle-plus"></span></a>
				</div>
			</div>

			<table class="main-table" style="margin: 0 auto;">
				<thead>
					<tr class="ui-widget-header">
						<th>序号</th>
						<th>
							<div>
								活动名称<a><abbr><span class="ui-icon ui-icon-triangle-1-n"></span></abbr> <abbr><span class="ui-icon ui-icon-triangle-1-s"></span></abbr></a>
							</div>
						</th>
						<th>活动图片</th>
						<th>
							<div>
								活动区域<a><abbr><span class="ui-icon ui-icon-triangle-1-n"></span></abbr> <abbr><span class="ui-icon ui-icon-triangle-1-s"></span></abbr></a>
							</div>
						</th>
						<th>
							<div>
								开始日期<a><abbr><span class="ui-icon ui-icon-triangle-1-n"></span></abbr> <abbr><span class="ui-icon ui-icon-triangle-1-s"></span></abbr></a>
							</div>
						</th>
						<th>
							<div>
								截止时间<a><abbr><span class="ui-icon ui-icon-triangle-1-n"></span></abbr> <abbr><span class="ui-icon ui-icon-triangle-1-s"></span></abbr></a>
							</div>
						</th>
						<th>
							<div>
								即时配送<a><abbr><span class="ui-icon ui-icon-triangle-1-n"></span></abbr> <abbr><span class="ui-icon ui-icon-triangle-1-s"></span></abbr></a>
							</div>
						</th>
						<th>活动性质</th>
						<th>特殊资源</th>
						<th>活动形式</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr style="display: none;">
						<td>序号</td>
						<td data-name="name">活动名称</td>
						<td data-name="imgs"></td>
						<td data-name="region">活动区域</td>
						<td data-name="date1">开始日期</td>
						<td data-name="date2">截止时间</td>
						<td data-name="delivery">即时配送</td>
						<td data-name="classify">活动性质</td>
						<td data-name="resource">特殊资源</td>
						<td data-name="remarks">活动形式</td>
						<td>
							<a onclick="forUpdate(this.parentNode.parentNode)" class="ui-state-default ui-corner-all">
								<span class="ui-icon ui-icon-pencil"></span>
							</a> 
							<a onclick="del(this.parentNode.parentNode)" class="ui-state-default ui-corner-all">
								<span class="ui-icon ui-icon-trash"></span>
							</a>
						</td>
					</tr>
				</tbody>
			</table>

			<div class="div-pagination" style="display:flex;flex-direction:row;align-items:center;justify-content:center;">
			
				<div style="margin-right: 3%;">
					<label for="speed">共有 <span class="total-span">0</span> 条数据 每页行数:</label> 
					<select name="pageSize" onchange="initTable()">
						<option value="5">5</option>
						<option value="10">10</option>
						<option value="20">20</option>
						<option value="50">50</option>
					</select>
				</div>
				<button class="ui-button ui-corner-all ui-widget ui-button-icon-only" title="前一页">
					<span class="ui-icon ui-icon-seek-prev"></span>					
				</button>
				<ul style="padding-left: 0;">
					<li class="ui-widget-content" >1</li>
					<li>...</li>
					<li class="ui-widget-content ui-state-active">2</li>
					<li class="ui-widget-content">3</li>
					<li class="ui-widget-content">4</li>
					<li class="ui-widget-content">5</li>
					<li class="ui-widget-content">6</li>
					<li class="ui-widget-content">7</li>
					<li class="ui-widget-content">8</li>
					<li class="ui-widget-content">9</li>
					<li>...</li>
					<li class="ui-widget-content">10</li>
				</ul>
				<button class="ui-button ui-corner-all ui-widget ui-button-icon-only" title="后一页">
					<span class="ui-icon ui-icon-seek-next"></span>
				</button>
			</div>
			
			<div class="dialog-form" title="新增/修改">
				<form>
					<input name="id" value="" style="display: none;" />
					<p>
						<label>活动名称:</label> <input name="name" value="" class="text">
					</p>
					<fieldset>
						<legend>活动图片</legend>
						<input type="file" class="upImgs" type="file" accept="image/*" name="upfs" />
						<div class="upImgs">

							<div class="ui-widget-content view-image-template" style="max-width: 45%; display: none;float:left;margin-right:5px;">
								<div class="ui-dialog-titlebar ui-widget-header ui-helper-clearfix">
									<span class="ui-dialog-title">点击右侧可删除</span>
									<button onclick="t=this.parentNode.parentNode;t.parentNode.removeChild(t)" class="ui-button ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-close" title="删除图片">
										<span class="ui-button-icon ui-icon ui-icon-closethick"></span>
									</button>
								</div>
								<div class="ui-dialog-content">
									<img alt="" src="../upload/2022061810/20220618102435015dfg.jpg" style="max-width: 100%;">
								</div>
							</div>
						</div>
					</fieldset>
					<p>
						<label>活动区域:</label> <select name="region">
							<option value=""></option>
							<option value="区域一">区域一</option>
							<option value="区域二">区域二</option>
						</select>
					</p>
					<p>
						<label>开始日期:</label> <input name="date1" value="" class="text ui-widget-content ui-corner-all">
					</p>
					<p>
						<label>截止时间:</label> <input name="date2" value="" class="text ui-widget-content ui-corner-all">
					</p>
					<fieldset>
						<legend>配送 </legend>
						<label>是</label> <input type="radio" name="delivery" value="true"> <label>否</label> <input type="radio" name="delivery" value="false">
					</fieldset>
					<fieldset>
						<legend>活动性质</legend>
						<input type="checkbox" name="classify" value="美食/餐厅线上活动"> <label>美食/餐厅线上活动</label> <input type="checkbox" name="classify" value="地推活动"> <label>地推活动</label> <input type="checkbox" name="classify" value="线下主题活动"> <label>线下主题活动</label>
						<input type="checkbox" name="classify" value="单纯品牌曝光"> <label>单纯品牌曝光</label>
					</fieldset>
					<fieldset>
						<legend>特殊资源</legend>
						<input type="radio" name="resource" value="线上品牌商赞助"> <label>线上品牌商赞助</label> <input type="radio" name="resource" value="地推活动"> <label>地推活动</label>
					</fieldset>
					<fieldset>
						<legend>活动形式:</legend>
						<textarea rows="" cols="" name="remarks" class="ui-widget-content" style="width: 100%"></textarea>

						<input type="submit" tabindex="-1" style="position: absolute; top: -1000px">
					</fieldset>
				</form>
			</div>
		</div>
		<div class="footer">底部</div>
	</div>
</body>
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.ajaxfileupload.js"></script>
<script type="text/javascript" src="js/times.js"></script>
<script type="text/javascript">
	var dialog, imgFile, pagination, baseURL = '../';
	$.when(document).then(function() {
		console.debug('...........................................初始化界面各元素,包括对话框dialog,日历......................................................')
		function getDate(element) {
			var date
			try {
				date = $.datepicker.parseDate(dateFormat, element.value)
			} catch (error) {
				date = null
			}
			return date
		}
		from = $(".query-div :text[name=start]").datepicker({
			defaultDate : "+1w",
			changeMonth : true,
			dateFormat : 'yy-mm-dd'
		}).on("change", function() {
			to.datepicker("option", "minDate", getDate(this))
		}), to = $(".query-div :text[name=end]").datepicker({
			defaultDate : "+1w",
			changeMonth : true,
			dateFormat : 'yy-mm-dd'
		}).on("change", function() {
			from.datepicker("option", "maxDate", getDate(this))
		})

		$(".dialog-form [name=date1], .dialog-form [name=date2]").datepicker({
			dateFormat : 'yy-mm-dd 00:00:00'
		});
		//初始化弹出编辑层
		dialog = $(".dialog-form").dialog({
			autoOpen : false,
			height : 400,
			width : 500,
			modal : true,
			buttons : {
				"确定" : function() {
					tempDate = $('.dialog-form input:not(:checkbox), .dialog-form textarea, .dialog-form select').serializeArray(),upDate={},chStr='',imgs=[];
					$.each(tempDate,(i,v)=>{upDate[v.name]=v.value; })
					$(".dialog-form [name=classify]:checked").each((i,e)=>{	chStr += e.value + ','	});	upDate['classify'] = chStr.replace(/,$/,'');
					$(".dialog-form div.view-image-template:first").find("~").find('img').each((i,e)=>{
						imgs.push({name:$(e).attr('data-name'),url:e.src.replace(/^.*\/upload\//,'')})
					})
					upDate['imgs'] = JSON.stringify(imgs);
					console.debug('...拟提交数据为.....',JSON.stringify(upDate,null,4))
					
 					$.post( baseURL + 'demo/createorupdate', upDate, function( data ) {
						 dialog.dialog("close");
						 initTable();
					}, "json");  
				},
				"取消" : function() {
					dialog.dialog("close")
				}
			},
			close : function() {
				$(".dialog-form div.view-image-template").find('~').remove()
				dialog.find('form')[0].reset()
			}
		})
		//初始化上传文件设置
		$(".dialog-form input.upImgs").AjaxFileUpload({
			action: baseURL + 'demo/upload',
			onComplete: function(filename, response) {
				console.debug('.....上传文件下载....',filename,'...返回...',response)
				var img = $(".dialog-form div.view-image-template:first").clone(true)
				$(".dialog-form div.upImgs").append(img.show().find('img').attr({src: baseURL + 'upload/'+response.url,'data-name':filename}).end());
				console.debug('......文件路径是......', baseURL + 'upload/'+response.url)
			} 
		});
		//排序按钮初始化
		//<a>
		//	<abbr>
		//		<span class="ui-icon ui-icon-triangle-1-n"></span>
		//	</abbr> 
		//	<abbr>
		//		<span class="ui-icon ui-icon-triangle-1-s"></span>
		//	</abbr>
		//</a>
		$('.main-table .ui-widget-header th a').find('abbr').click((o,e)=>{
			self = /SPAN/.test(o.target.tagName)?o.target:o.target.querySelector('SPAN'),  other = $(self.parentNode.parentNode).find('span').not(self)[0]
 			 if($(self).css('visibility')!=='hidden' && $(other).css('visibility')!=='hidden'){
 				$(self).css('visibility','visible'); 
 				$(other).css('visibility','hidden');
			}else if($(self).css('visibility')==='hidden' && $(other).css('visibility')!=='hidden'){
				$(self).css('visibility','visible')
				$(other).css('visibility','hidden')
			}else if($(self).css('visibility')!=='hidden' && $(other).css('visibility')==='hidden'){
				$(self).css('visibility','visible')
				$(other).css('visibility','visible')
			} 
			initTable()
			return false;
		})
		
		//分页按钮初始化
		$('.div-pagination ul > li.ui-widget-content').click((e)=>{$(".query-div [name=p]").val(e.target.innerHTML);initTable();})
		
		initTable()

		console.debug('.................................................................................................')
	})
	console.debug(".......", dialog)

	function initTable() {
		o = $(".query-div :text,.query-div select, .div-pagination select").serializeArray(),orderBy='';
		//排序
		$('.main-table .ui-widget-header th abbr span').each((i,o)=>{
			if($(o).css('visibility')==='hidden'){
				orderBy += $(".main-table tbody tr:eq(0) > td:eq(" + $(o.parentNode.parentNode.parentNode.parentNode).index() + ")").attr("data-name").toLowerCase()
				orderBy += '  ' + ($(o).hasClass('ui-icon-triangle-1-s')?'ASC':'DESC') + ','			
			}
		})
		if(orderBy.length > 3)
			o.push({name:'orderBy',value:orderBy.replace(/,$/,'')})
			
		console.debug('.........拟搜索参数为....',JSON.stringify(o,null,4))
		$.get(baseURL + 'demo/list', o, function(data) {
			arrayList = [];$.each(data.list,(i,td)=>{newTD = {};$.each(td,(n,v)=>{newTD[n.toLowerCase()]=v;});arrayList.push(newTD)})
//			console.debug('>>>>>>>>>>>>>>>>>', JSON.stringify(arrayList, null, 4))
			tempObject = $(".main-table tbody tr:eq(0)").find("~").remove().end(), $(".div-pagination span.total-span").text(data.total), $(".query-div [name=p]").val(data.pageNum), data.pageNum = $(".query-div [name=p]").val();
			$(arrayList).each(function(i, e) {
				index = i / 1 + 1 + (data.pageNum - 1) * $(".div-pagination select").val()
				t = tempObject.clone().show().find('td:first').text(index).end().data("content", e).appendTo(".main-table > tbody")
				$.each(t.find("td[data-name]"),(i,td) =>{
					o = $(td).attr("data-name")
					if ((/img/i).test(o) && !!e[o]) {
						for (td = t.find("td[data-name=" + o + "]"), imgs = eval(e[o]), j = 0; j < imgs.length; j++) {
							var img = $(".dialog-form div.view-image-template:first").clone(true)
							img.find('button').remove().end().find('span.ui-dialog-title').text(imgs[j]['name'])
						//	td.find("img:first").clone().show().attr('src', '/upload/' + imgs[j]['url']).appendTo(td)		
							td.append(img.show().find('img').attr({src:baseURL + 'upload/'+imgs[j]['url'],'data-name':imgs[j]['name']}).end());
						}
					} else if ((/date/i).test(o)) {
						t.find("td[data-name=" + o + "]").text(parseTime( new Date(e[o]) ))
					} else if (typeof e[o] === 'boolean') {
						t.find("td[data-name=" + o + "]").text(e[o]===true?'是':(e[o]===false?'否':''))
					} else {
						t.find("td[data-name=" + o + "]").text((!e[o])?'':e[o])
					}
				})
			})

			//页码修正 ui-widget-content ui-state-active
			pageTotal = Math.ceil(data.total / $(".div-pagination select").val()), pages = $('.div-pagination ul > li.ui-widget-content').show().removeClass('ui-state-active');  dots = $('.div-pagination ul > li:not(.ui-widget-content').show();
			if(pageTotal <= pages.length){
				$.each(pages.toArray().reverse(),(k,li)=>{li.innerHTML = pageTotal - k;if(pageTotal < (k + 1)) $(li).hide();});dots.hide();
			}else{
				if( data.pageNum < (Math.ceil(pages.length/2)+1)){
					$.each(pages.toArray(),(k,li)=>{li.innerHTML=k/1+1;});dots.first().hide();
				}else if( data.pageNum > (pageTotal- Math.ceil(pages.length/2)-1)){
					$.each(pages.toArray().reverse(),(k,li)=>{li.innerHTML = pageTotal - k;});dots.last().hide();
				}else{
					$.each(pages,(k,li)=>{li.innerHTML = (data.pageNum - (Math.floor(pages.length/2)-1)) + k;})
				}
				pages.first().html(1);pages.last().html(pageTotal);
			}

			$.each(pages,(j,li)=>{ if(li.innerHTML==data.pageNum){$(li).addClass('ui-state-active')}})			

		}, "json")

	}

	function forUpdate(o) {
		for ( n in (da = $(o).data("content"))) {
			o = $('.dialog-form [name=' + n.toLowerCase() + ']'),tp = o.prop('type');
			if((/(checkbox)|(radio)/i).test(tp))
				$.each((da[n]+'').split(','),(i,e)=>{$('.dialog-form [name=' + n.toLowerCase() + '][value="'+e+'"]').prop('checked',true)})
			else if ((/date/i).test(n))
				$('.dialog-form input[name=' + n.toLowerCase() + ']').val(parseTime( new Date(da[n]) ))
			else if(!da[n] === false && (/img/i).test(n) ){
				var img = $(".dialog-form div.view-image-template:hidden").clone()
				console.debug('....图片数据....',da[n])
				imgs = {}; eval('imgs = ' + da[n])
				console.debug('....图片数据....',imgs)
				$.each(imgs,(i,e)=>{
					$(".dialog-form div.upImgs").append(img.clone(true).show().find('img').attr({src:baseURL + 'upload/'+e.url,'data-name':e.name}).end());
				})
			}else	
				$('.dialog-form [name=' + n.toLowerCase() + ']').val(da[n])
		}
		dialog.dialog("open")

	}
	
	function forInsert(o) {
		dialog.dialog("open")
	}

	function del(o) {
		console.debug($(o).data("content")["ID"])
		$.post(baseURL + 'demo/delete', {
			id : $(o).data("content")["ID"]
		}, function() {
			initTable()
		})
	}
</script>

</html>
